<template>
	<view class="content">
		<u-navbar title="主产品" height="88rpx" :placeholder='true' left-icon-color="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="client_person">
			<!-- 	<view class="person_info">
				<view class="">
					客户姓名：李
				</view>
				<view class="">
					客户手机：17737525916
				</view>
			</view>
			<view class="filtrate" @click="show = true">
				筛选
			</view> -->
		</view>
		<view class="product_content">
			<!-- 	<view class="new_product_list">
				<template v-for="item in list1">
					<main-goods :item="item"></main-goods>
				</template>
			</view>
			<view class="new_product_list">
				<template v-for="item in list2">
					<main-goods :item="item"></main-goods>
				</template>
			</view> -->
		</view>
		<u-popup :show="show" mode="right" :customStyle="customStyle" @close="close" @open="open">
			<view class="filtrate_box">
				<search-button-input></search-button-input>
				<!-- <scroll-view scroll-y="true">
					<view class="clientele">
						<u-checkbox-group activeColor="#FF594D" placement="column" @change="checkboxChange">
							<view class="clientele_item">
								<view class="item_left">
									<u-checkbox size="32rpx" shape='circle' name="name"></u-checkbox>
									<view class="client_info">
										李 &nbsp;177**********
									</view>
								</view>
								<view class="item_right">
									<image src="/static/images/factionalism/编辑@2x.png" class="edit" mode=""></image>
									<view class="arrow">
										<image src="/static/images/mine/图标@2x.png" mode="" calss="arrow"></image>
									</view>
								</view>
							</view>
							<view class="clientele_item">
								<view class="item_left">
									<u-checkbox size="32rpx" shape='circle' name="name"></u-checkbox>
									<view class="client_info">
										李 &nbsp;177**********
									</view>
								</view>
								<view class="item_right">
									<image src="/static/images/factionalism/编辑@2x.png" class="edit" mode=""></image>
									<view class="arrow">
										<image src="/static/images/mine/图标@2x.png" mode="" calss="arrow"></image>
									</view>
								</view>
							</view>
							<view class="clientele_item">
								<view class="item_left">
									<u-checkbox size="32rpx" shape='circle' name="name"></u-checkbox>
									<view class="client_info">
										李 &nbsp;177**********
									</view>
								</view>
								<view class="item_right">
									<image src="/static/images/factionalism/编辑@2x.png" class="edit" mode=""></image>
									<view class="arrow">
										<image src="/static/images/mine/图标@2x.png" mode="" calss="arrow"></image>
									</view>
								</view>
							</view>
						</u-checkbox-group>
					</view>
				</scroll-view>
			 -->
			</view>
		</u-popup>
		<!-- <view class="bottom">
			<view class="left">
				<text>合计：</text>￥40.00
			</view>
			<view class="right">
				提交
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				list1: [{
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x.png',
					current_price: '22',
					original_price: '23',
					goods_title: '粤食粤好酱肉包900g返'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x (1).png',
					current_price: '22',
					original_price: '23',
					goods_title: '东洛岛东海头道鲜有机小海带结256g'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x.png',
					current_price: '22',
					original_price: '23',
					goods_title: '粤食粤好酱肉包900g返'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x (1).png',
					current_price: '22',
					original_price: '23',
					goods_title: '东洛岛东海头道鲜有机小海带结256g'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x.png',
					current_price: '22',
					original_price: '23',
					goods_title: '粤食粤好酱肉包900g返'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x (1).png',
					current_price: '22',
					original_price: '23',
					goods_title: '东洛岛东海头道鲜有机小海带结256g'
				}, ],
				list2: [{
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x (1).png',
					current_price: '22',
					original_price: '23',
					goods_title: '东洛岛东海头道鲜有机小海带结256g'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x.png',
					current_price: '22',
					original_price: '23',
					goods_title: '粤食粤好酱肉包900g返'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x (1).png',
					current_price: '22',
					original_price: '23',
					goods_title: '东洛岛东海头道鲜有机小海带结256g'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x.png',
					current_price: '22',
					original_price: '23',
					goods_title: '粤食粤好酱肉包900g返'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x (1).png',
					current_price: '22',
					original_price: '23',
					goods_title: '东洛岛东海头道鲜有机小海带结256g'
				}, {
					img_url: '/pages_spell/static/images/main-product/Rectangle 1@2x.png',
					current_price: '22',
					original_price: '23',
					goods_title: '粤食粤好酱肉包900g返'
				}, ],
				show: false,
				customStyle: {
					'margin-top': '88rpx',
					// #ifdef MP
					'margin-top': '180rpx'
					// #endif
				},
				checkboxValue1: false
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		// height: 100vh;
		min-height: 100vh;

		.client_person {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.person_info {
				// width: 286rpx;
				height: 92rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 800;
				color: #FF594D;
			}

			.filtrate {
				width: 125rpx;
				height: 68rpx;
				background: #FF594D;
				border-radius: 476rpx 476rpx 476rpx 476rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 68rpx;
				color: #FFFFFF;
			}
		}

		.product_content {

			padding: 0 20rpx 144rpx;
			display: flex;
			justify-content: space-between;
		}

		.filtrate_box {

			width: 640rpx;
			padding-top: 16rpx;

			scroll-view {
				height: 100vh;
			}

			.clientele {
				padding: 0 20rpx;
				padding-bottom: 200rpx;

				.clientele_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 56rpx;
					margin-bottom: 20rpx;

					.item_left {
						display: flex;
						align-items: center;

						.client_info {
							margin-left: 10rpx;
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #777777;
						}
					}

					.item_right {
						display: flex;

						.edit {
							width: 32rpx;
							height: 32rpx;
							margin-right: 22rpx;
						}

						.arrow {
							width: 40rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 17rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}

		.bottom {
			width: 752rpx;
			height: 142rpx;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			box-shadow: 0 4rpx 5rpx 5rpx #777777;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.left {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F44236;

				text {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					color: #333332;
				}

			}

			.right {
				width: 170rpx;
				height: 56rpx;
				background: #FF594D;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>